<template>
  <div class="w-full h-full flex flex-col overflow-x-hidden overflow-y-auto">
    <n-card
        :bordered="false"
        title="基本信息"
        class="mt-4 proCard relative"
        size="small"
        :segmented="{ content: 'hard' }"
    >
      <descriptions :infoList="_userinfo"></descriptions>
      <n-button class="absolute top-2 right-15 dianji text-blue-500" text @click="refreshuserinfo">
        <NIcon>
          <Refresh></Refresh>
        </NIcon>
        刷新
      </n-button>
      <n-button class="absolute top-2 right-2 dianji text-blue-500" text @click="edituserinfo">
        <NIcon>
          <EditTwotone></EditTwotone>
        </NIcon>
        编辑
      </n-button>
    </n-card>
    <n-card
        :bordered="false"
        title="教育经历"
        class="mt-4 proCard relative"
        size="small"
        :segmented="{ content: 'hard' }"
    >
      <flextable :column.sync="studyColnum" :tabledata="studyinfolist" :showctl="false"></flextable>
      <n-button class="absolute top-2 right-15 dianji text-blue-500" text @click="getstudyinfofunc">
        <NIcon>
          <Refresh></Refresh>
        </NIcon>
        刷新
      </n-button>
      <n-button class="absolute top-2 right-2 dianji text-blue-500" text @click="addstudyinfo">
        <NIcon>
          <PlusOutlined></PlusOutlined>
        </NIcon>
        增加
      </n-button>
    </n-card>
    <n-card
        :bordered="false"
        title="培训经历"
        class="mt-4 proCard relative"
        size="small"
        :segmented="{ content: 'hard' }"
    >
      <flextable :column.sync="peixunColnum" :tabledata="peixuninfolist" :showctl="false"></flextable>
      <n-button class="absolute top-2 right-15 dianji text-blue-500" text>
        <NIcon>
          <Refresh></Refresh>
        </NIcon>
        刷新
      </n-button>
      <n-button class="absolute top-2 right-2 dianji text-blue-500" text @click="addpeixuninfo">
        <NIcon>
          <PlusOutlined></PlusOutlined>
        </NIcon>
        增加
      </n-button>
    </n-card>
    <n-card
        :bordered="false"
        title="工作经历"
        class="mt-4 proCard relative"
        size="small"
        :segmented="{ content: 'hard' }"
    >
      <flextable :column.sync="workColnum" :tabledata="workinfolist" :showctl="false"></flextable>
      <n-button class="absolute top-2 right-15 dianji text-blue-500" text>
        <NIcon>
          <Refresh></Refresh>
        </NIcon>
        刷新
      </n-button>
      <n-button class="absolute top-2 right-2 dianji text-blue-500" text @click="addworkinfo">
        <NIcon>
          <PlusOutlined></PlusOutlined>
        </NIcon>
        增加
      </n-button>
    </n-card>
    <StudyModel ref="studyref" @shuaxin="getstudyinfofunc"></StudyModel>
    <WorkModel ref="workref" @shuaxin="getworkinfofunc"></WorkModel>
    <PeixunModel ref="peixunref" @shuaxin="getpeixuninfofunc"></PeixunModel>
    <PersionModel ref="perisonref" @shuaxin="getuserinfofunc"></PersionModel>
    <div class="w-full h-20 flex-shrink-0"></div>
  </div>
</template>

<script setup name="Persioninfo">
import {useRoute, useRouter} from "vue-router";
import {EditTwotone, PlusOutlined} from "@vicons/antd"
import {Refresh} from "@vicons/tabler"
import http from "@/request/request"
import StudyModel from "./studyModel.vue"
import WorkModel from "./workModel.vue"
import PeixunModel from "./peixunModel.vue"
import PersionModel from "./persionModel.vue"
import {NButton} from "naive-ui";

const studyref = ref(null)
const workref = ref(null)
const perisonref = ref(null)
const peixunref = ref(null)
const router = useRouter()
const route = useRoute()
// 个人信息
const userinfo = ref([
  {label: "id", key: "id", hidden: true},  // id字段不需要显示
  {label: "姓名", key: "xingming"},
  {label: "用户ID", key: "user"},
  {label: "民族", key: "minzu"},
  {label: "籍贯", key: "jiguan"},
  {label: "出生地", key: "chushengdi"},
  {label: "政治面貌", key: "zhengzhimianmao"},
  {label: "身高", key: "shengao"},
  {label: "体重", key: "tizhong"},
  {label: "参加工作时间", key: "worktime"},
  {label: "最高学历", key: "xueli"},
  {label: "身份证号", key: "shenfenzheng"},
  {label: "联系地址", key: "chushengdizhi"},
  {label: "电话", key: "dianhua"},
  {label: "所在地区", key: "xianzaidizhi"},
  {
    label: "出生日期", key: "chushengriqi", render: (val) => {
      return val ? new Date(parseInt(val)).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
      }) : ""
    }
  },
])
const _userinfo = computed(() => {
  return userinfo.value.map((item, index) => {
    return {...item, value: item.render ? item.render(item.value) : item.value,}
  })
})
// 教育经历
const studyinfolist = ref([])
const studyColnum = ref([
  {
    title: "序号", key: "index", show: true, width:60,render: (rowData, rowIndex) => {
      return rowIndex + 1
    }
  },
  {title: "学校名称", key: "schoolname", show: true,},
  {title: "学校地址", key: "schoolarea", show: true},
  {
    title: "学历", key: "level", show: true, render: (rowData, rowIndex) => {
      return rowData["level"]?.name
    }
  },
  {
    title: "学制", key: "xuezhi", show: true, render: (rowData, rowIndex) => {
      return rowData["xuezhi"]?.name
    }
  },
  {title: "专业名称", key: "zhuanye", show: true},
  {
    title: "是否毕业", key: "complete", show: true, render: (rowData, rowIndex) => {
      return rowData["complete"] === 1 ? "毕业" : "肄业"
    }
  },
  {
    title: "开始时间", key: "startTime", show: true, render: (rowData, rowIndex) => {
      return new Date(rowData["startTime"]).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
      })
    }
  },
  {
    title: "结束时间", key: "endTime", show: true, render: (rowData, rowIndex) => {
      return new Date(rowData["endTime"]).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
      })
    }
  },
  {
    title: "详情", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handlestudyView(rowData)
        }, size: "small", class: {"mx-1": true}, type: "primary"
      }, {
        default: () => {
          return "详情"
        }
      })
    }
  },
  {
    title: "编辑", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handlestudyEdit(rowData)
        }, size: "small", class: {"mx-1": true}, type: "info"
      }, {
        default: () => {
          return "编辑"
        }
      })
    }
  },
  {
    title: "删除", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handlestudyDelete(rowData)
        }, size: "small", class: {"mx-1": true}, type: "error"
      }, {
        default: () => {
          return "删除"
        }
      })
    }
  },
])
// 培训经历
const peixuninfolist = ref([])
const peixunColnum = ref([
  {
    title: "序号", key: "index", show: true,width:60, render: (rowData, rowIndex) => {
      return rowIndex + 1
    }
  },
  {title: "学校名称", key: "schoolname", show: true,},
  {title: "学校地址", key: "schoolarea", show: true},
  {title: "专业名称", key: "zhuanye", show: true},
  {
    title: "是否毕业", key: "complete", show: true, render: (rowData, rowIndex) => {
      return rowData["complete"] === 1 ? "毕业" : "肄业"
    }
  },
  {
    title: "开始时间", key: "startTime", show: true, render: (rowData, rowIndex) => {
      return new Date(rowData["startTime"]).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
      })
    }
  },
  {
    title: "结束时间", key: "endTime", show: true, render: (rowData, rowIndex) => {
      return new Date(rowData["endTime"]).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
      })
    }
  },
  {
    title: "详情", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handlepeixunView(rowData)
        }, size: "small", class: {"mx-1": true}, type: "primary"
      }, {
        default: () => {
          return "详情"
        }
      })
    }
  },
  {
    title: "编辑", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handlepeixunEdit(rowData)
        }, size: "small", class: {"mx-1": true}, type: "info"
      }, {
        default: () => {
          return "编辑"
        }
      })
    }
  },
  {
    title: "删除", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handlepeixunDelete(rowData)
        }, size: "small", class: {"mx-1": true}, type: "error"
      }, {
        default: () => {
          return "删除"
        }
      })
    }
  },
])
// 工作经历
const workinfolist = ref([])
const workColnum = ref([
  {
    title: "序号", key: "index", show: true,width:60, render: (rowData, rowIndex) => {
      return rowIndex + 1
    }
  },
  {title: "公司名称", key: "companyname", show: true,},
  {title: "公司地址", key: "companyarea", show: true},
  {title: "职位", key: "zhiwei", show: true},
  {title: "薪资", key: "xinzi", show: true},
  {title: "职位描述", key: "desc", show: true},
  {
    title: "开始时间", key: "startTime", show: true, render: (rowData, rowIndex) => {
      return new Date(rowData["startTime"]).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
      })
    }
  },
  {
    title: "结束时间", key: "endTime", show: true, render: (rowData, rowIndex) => {
      return new Date(rowData["endTime"]).toLocaleString("zh", {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric',
      })
    }
  },
  {
    title: "详情", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handleworkView(rowData)
        }, size: "small", class: {"mx-1": true}, type: "primary"
      }, {
        default: () => {
          return "详情"
        }
      })
    }
  },
  {
    title: "编辑", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handleworkEdit(rowData)
        }, size: "small", class: {"mx-1": true}, type: "info"
      }, {
        default: () => {
          return "编辑"
        }
      })
    }
  },
  {
    title: "删除", key: "action", width: "60", show: true, render: (rowData, rowIndex) => {
      return h(NButton, {
        onClick: () => {
          handleworkDelete(rowData)
        }, size: "small", class: {"mx-1": true}, type: "error"
      }, {
        default: () => {
          return "删除"
        }
      })
    }
  },
])

// 点击增加教育经历
const addstudyinfo = () => {
  studyref.value.init("add")
}
// 点击增加培训经历
const addpeixuninfo = () => {
  peixunref.value.init("add")
}
// 点击增加工作经历
const addworkinfo = () => {
  workref.value.init("add")
}

// 点击删除
let deletemodel = inject("deletemodel")
const handlestudyDelete = (item) => {
  console.log(item, "删除的数据")
  deletemodel(getstudyinfofunc(), http.deletestudyinfo, item.id, item.schoolname)
}
const handlepeixunDelete = (item) => {
  deletemodel(getpeixuninfofunc(), http.deletepeixuninfo, item.id, item.schoolname)
}
const handleworkDelete = (item) => {
  deletemodel(getworkinfofunc(), http.deleteworkinfo, item.id, item.companyname)
}

// 点击查看
const handlestudyView = (item) => {
  studyref.value.init("view", item)
}
const handlepeixunView = (item) => {
  peixunref.value.init("view", item)
}

const handleworkView = (item) => {
  workref.value.init("view", item)
}

// 点击编辑
const handlestudyEdit = (item) => {
  studyref.value.init("edit", item)
}
const handlepeixunEdit = (item) => {
  peixunref.value.init("edit", item)
}
const handleworkEdit = (item) => {
  workref.value.init("edit", item)
}


// 获取用户个人信息
const getuserinfofunc = () => {
  http.getuserinfo().then(({data}) => {
    if (data.code === 0) {
      userinfo.value.forEach((item, index) => {
        if (item.key) {
          item.value = data.data[item.key] || ""
        }
      })
    }
  })
}
// 获取用户教育信息
const getstudyinfofunc = () => {
  http.liststudyinfo().then(({data}) => {
    if (data.code === 0) {
      studyinfolist.value = data.items
    }
  })
}
// 获取用户培训信息
const getpeixuninfofunc = () => {
  http.listpeixuninfo().then(({data}) => {
    if (data.code === 0) {
      peixuninfolist.value = data.items
    }
  })
}
// 获取用户工作经历
const getworkinfofunc = () => {
  http.listworkinfo().then(({data}) => {
    if (data.code === 0) {
      workinfolist.value = data.items
    }
  })
}
// 点击刷新用户详细数据
const refreshuserinfo = () => {
  getuserinfofunc()
}
// 点击编辑用户详细信息
const edituserinfo = () => {
  perisonref.value.init("edit", _userinfo.value)
}
// 生命周期区域
getworkinfofunc()
getpeixuninfofunc()
getstudyinfofunc()
getuserinfofunc()
</script>

<style scoped>

</style>
